﻿@{
    Layout = "../Shared/_LayoutMain.cshtml";
    ViewBag.PageTitle = "编辑地址 - " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<div class="wrapper">
    <div class="account-box">
        @{
            await Html.RenderPartialAsync("../Shared/_AccountNav.cshtml", "address");
        }
        <div class="right-box">
            <div class="tab-box">
                <div class="menu-box">
                    <div class="item-box active">
                        <span>收货地址</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <el-form ref="editForm" :model="model" :rules="rules" label-position="right" label-width="120px">
                    <el-form-item prop="acceptName" label="收货人姓名">
                        <el-input v-model="model.acceptName" placeholder="必填，收货人姓名"></el-input>
                    </el-form-item>
                    <el-form-item prop="mobile" label="手机号码">
                        <el-input v-model="model.mobile" placeholder="必填，收货人手机号码"></el-input>
                    </el-form-item>
                    <el-form-item prop="areaValue" label="所属地区">
                        <el-cascader v-model="model.areaValue" :options="areaOptions" :props="{label:'title',value:'title'}" placeholder="请选择省市区" @@change="handleAreaChange"></el-cascader>
                    </el-form-item>
                    <el-form-item prop="address" label="详情地址">
                        <el-input type="textarea" :rows="2" v-model="model.address" placeholder="除省市区外详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="默认地址">
                        <el-switch v-model="model.isDefault" :inactive-value="0" :active-value="1"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @@click="submitForm">确认提交</el-button>
                        <el-button @@click="common.back(-1)">取消</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                account: {}, //账户信息
                areaOptions: [], //省市区树
                model: {
                    id: 0,
                    userId: 0,
                    userName: null,
                    acceptName: null,
                    province: null,
                    city: null,
                    area: null,
                    address: null,
                    telphone: null,
                    mobile: null,
                    zip: null,
                    isDefault: 0,
                    addTime: null,
                    areaValue: null, //省市区值
                },
                rules: {
                    acceptName: [
                        { required: true, message: '请输入收货人姓名', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { pattern: /^1[0-9]{10}$/, message: '手机号码格式不正确', trigger: 'blur' }
                    ],
                    areaValue: [
                        { required: true, message: '请选择省市区', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入详细的收货地址', trigger: 'blur' }
                    ],
                }
            },
            methods: {
                //初始化数据
                async initData(id) {
                    let _this = this;
                    //获取会员信息
                    await AxiosAjax({
                        url: `/account/member/info`,
                        success(res) {
                            _this.account = res.data;
                        }
                    });
                    //加载省市区
                    await AxiosAjax({
                        url: `/client/area`,
                        success(res) {
                            _this.areaOptions = _this.getTreeData(res.data);
                        }
                    });
                    //获取地址信息
                    if (id) {
                        await AxiosAjax({
                            url: `/account/member/address/${id}`,
                            success: function (res) {
                                _this.model = res.data;
                                let addrArr = _this.model.address.split(',');//将地址拆分
                                _this.model.address = addrArr[addrArr.length - 1];
                                _this.model.areaValue = [_this.model.province, _this.model.city, _this.model.area];
                            }
                        });
                    }
                },
                // 递归判断列表
                getTreeData(data, lay = 0) {
                    lay++;
                    for (var i = 0; i < data.length; i++) {
                        if (lay >= 3) {
                            data[i].children = undefined;
                        } else {
                            this.getTreeData(data[i].children, lay);
                        }
                    }
                    return data;
                },
                //提交表单
                submitForm() {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        //提交表单,Id大于0则修改，否则添加
                        if (_this.model.id > 0) {
                            AxiosAjax({
                                method: 'put',
                                url: `/account/member/address/${_this.model.id}`,
                                data: _this.model,
                                loading: true,
                                successMsg: '编辑地址成功',
                                success(res) {
                                    //跳转列表页
                                    common.linkUrl("/account/address/list")
                                }
                            });
                        } else {
                            AxiosAjax({
                                method: 'post',
                                url: `/account/member/address`,
                                data: _this.model,
                                loading: true,
                                successMsg: '添加地址成功',
                                success(res) {
                                    //重置表单
                                    _this.$refs['editForm'].resetFields();
                                }
                            });
                        }

                    })
                },
                //省市区事件
                handleAreaChange(value) {
                    this.model.areaValue = value;
                    this.model.province = this.model.areaValue[0];
                    this.model.city = this.model.areaValue[1];
                    this.model.area = this.model.areaValue[2];
                },
            },
            created() {
                this.initData(@Model)
            }
        })
    </script>
}